.upload_img_wrap {
	.bread_crumb_wrap {
		margin-left: 20px;
	}
	.title_area {
		margin: 10px;
		line-height: 24px;
		&:after {
			clear: both;
			content: '';
			display: table;
		}
		.total_pic {
			float: right;
			font-size: 12px;
			color: #999;
			.count {
				color: #f33;
				padding: 0 5px;
			}
		}
	}
	.big_title, .title_type, .photoset_title {
		float: left;
	}
	.big_title {
		font-size: 16px;
		font-weight: 700;
		margin-right: 14px;
		margin-left: 10px;
	}
	.title_type {
		width: 40px;
		border-radius: 2px;
		text-align: center;
		color: #fff;
		background-color: #9cabbc;
		font-size: 12px;
		margin-right: 6px;
	}
	.upload_area {
		position: relative;
		text-align: center;
		font-size: 12px;
		margin: 0 10px;
		min-height: 500px;
		height: 525px;
		border: 1px solid #cbd5e4;
		border-radius: 2px;
		background-color: #d9e1eb;
		overflow-y: auto;
		&.uploading {
			overflow: hidden;
			height: auto;
		}
		&.hover {
			border: dashed 1px #999;
			background-color: #cfe2f9;
			opacity: 0.5;
		}
		.select_area {
			width: 150px;
			height: 74px;
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 2;
			margin-top: -37px;
			margin-left: -75px;
			p.tip {
				color: #999;
			}
		}
		.select_btn {
			width: 122px;
			height: 46px;
			background-color: #69b0e8;
			border: 0;
			color: #fff;
			font-size: 14px;
			margin-bottom: 14px;
			border-radius: 2px;
			&:hover {
				background-color: #70c0ff;
			}
		}
		.pic_list {
			box-sizing: border-box;
			margin-bottom: 10px;
			&:after {
				content: '';
				clear: both;
				display: table;
			}
			.add_item {
				cursor: pointer;
				.icon_add_img {
					margin-top: 58px;
					display: inline-block;
					width: 34px;
					height: 34px;
					background: url('../../images/icon_add_img.png') center center no-repeat;
				}
				.tip {
					font-size: 16px;
				}
			}
			.add_item, .pic_item {
				position: relative;
				width: 240px;
				height: 180px;
				float: left;
				border: 1px solid #cbd5e4;
				text-align: center;
				margin-top: 10px;
				margin-left: 10px;
				background-color: #f4f7fc;
				overflow: hidden;
				img {
					max-width: 100%;
				}
				.icon_remove {
					position: absolute;
					top: 0;
					right: 0;
					width: 22px;
					height: 22px;
					background: url('../../images/icon_pic_remove.png') center top no-repeat;
					cursor: pointer;
				}
			}
			.pic_item {
				display: flex;
    			justify-content: center;
    			align-items: center;
			}
		}
		.uploading_area {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			right:0;
			bottom: 0;
			width: 100%;
			height: 100%;
			overflow:hidden;
			background-color: rgba(217, 225, 235, 0.95);
			z-index: 3;
			font-size: 14px;
			color: #333;
			.uploading_tip {
				margin-top: 220px;
			}
			.completed {
				color: #f33;
				margin-left: 10px;
			}
			.progress_bar {
				width: 550px;
				height: 6px;
				background-color: #fff;
				position: relative;
				left: 50%;
				margin-left: -275px;
				margin-top: 20px;
				.progress_completed {
					width: 0;
					height: 100%;
					background-color: #69b0e8;
					transition: width 300ms cubic-bezier(.25,1.5,.8,.61);
				}
			}
			.btn_cancel {
				margin-top: 55px;
				width: 78px;
				line-height: 31px;
				background-color: #69b0e8;
				border: 0;
				border-radius: 2px;
				color: #fff;
				&:hover {
					background-color: #70c0ff;
				}
			}
		}
	}
	.btn_area {
		text-align: right;
		margin-top: 10px;
		.upload_btn {
			width: 78px;
			line-height: 31px;
			color: #fff;
			background-color: #597392;
			border: 0;
			border-radius: 2px;
			margin-right: 10px;
			&:hover {
				background-color: #6a87ab;
			}
		}
	}
}

.watermark_area {
	padding: 20px;
	background-color: #f4f7fc;
	border-radius: 2px;
	position: relative;
	.big_title {
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
		margin-bottom: 15px;
	}
	.icon_close {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 20px;
		height: 20px;
		background: url('../../images/icon_tab_close.png') center center no-repeat;
		cursor: pointer;
		transition: all ease-in-out 300ms;
		&:hover {
			transform: rotate(90deg);
		}
	}
	.img_area, .style_area {
		float: left;
	}
	.img_area {
		width: 540px;
		height: 418px;
		border: 1px solid #cbd5e4;
		background: url('../../images/watermark_example.jpg') center center no-repeat;
		background-color: #d9e1eb;
		margin-right: 20px;
	}
	.style_area {
		.title {
			line-height: 1;
			margin-bottom: 16px;
		}
		.watermark_list {
			min-width: 210px;
			text-align: center;
			margin-bottom: 20px;
			height: 186px;
			overflow-y: auto;
			.watermark_item {
				width: 210px;
				cursor: pointer;
				line-height: 29px;
				background-color: #d9e1eb;
				border: 1px solid #cbd5e4;
				margin-bottom: 10px;
				margin-right: 10px;
				border-radius: 2px;
				&:last-child {
					margin-bottom: 0;
				}
			}
			.current {
				color: #fff;
				border-color: #69b0e8;
				background-color: #69b0e8;
			}
		}
		.position_table {
			background-color: #e9eef4;
			tbody {
				tr {
					td {
						width: 38px;
						height: 28px;
						border: 1px solid #cbd5e4;
					}
					td.selected {
						background: url(../../images/icon_watermark_selected.png) center center / 16px 12px no-repeat;
						background-color: #d9e1eb;
					}
				}
			}
		}
		.btns {
			display: flex;
    		justify-content: flex-end;
    		margin-top: 34px;
		}
		.single_btn {
			width: 78px;
			line-height: 31px;
			color: #fff;
			font-size: 12px;
			background-color: #69b0e8;
			border: 0;
			border-radius: 2px;
			&:first-child {
				margin-right: 10px;
			}
			&:hover {
				background-color: #70c0ff;
			}
		}

	}

}

